<template>
  <div class="nav">
    <van-nav-bar
    v-if="showNavbar"
      @click-left="router.back()"
      style="background-color: transparent;"
    >
    <!-- :title="(route.meta.title as string)" -->
    <template #title>
        <div :style="{color: (route.meta.color as string)}">
          {{ (route.meta.title as string) }}
        </div>
      </template>
      <template #left>
        <van-icon name="arrow-left" size="24" :color="route.meta.color as string || '#333'" />
      </template>
    </van-nav-bar>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const showNavbar = computed(() => { return route.meta.showNavbar })
const route = useRoute();
const router = useRouter();
</script>
<style lang="less" scoped>
.nav {
  position: fixed;
  top: 0;
  width: 100%;
}
:deep(.van-nav-bar__content) {
    height: 50px;
    border-bottom: none;
  }
  :deep(.van-hairline--bottom:after) {
    border-bottom-width: 0;
  }
  :deep(.van-nav-bar__title) {
    font-size: 16px;
    font-weight: 400;
    // color: #333;
  }
  :deep(.van-nav-bar__left, .van-nav-bar__right) {
    padding: 2px;
  }
  :deep(.van-nav-bar__title) {
    color: #000;
  }

</style>
